import React from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import styles from './index.less';
import util from '@/utils'
const ParkMapImageRatio = 0.47071;

export default ({onClick}: { onClick?: Function }) => {
   const mapContainerRef = React.useRef<any>();

   React.useEffect(() => {
      AMapLoader.load({
         key: '1dc3efb3ad13e905f009b865e8a82768',
         version: '2.0',
         plugins: [],
         AMapUI: {
            version: '1.1',
            plugins: ['overlay/SimpleMarker', 'control/BasicControl', 'overlay/SimpleInfoWindow']
         }
      }).then(AMap => {
         const {AMapUI} = window as unknown as { AMapUI: any };
         const map = new AMap.Map(mapContainerRef.current, {
            center: [1024 / 200, 1024 * ParkMapImageRatio / 200],
            lang: 'zh_cn',
            zooms: [5, 10],
            features: [],
            zoom: 8,
            doubleClickZoom: false,
            layers: [
               new AMap.ImageLayer({
                  bounds: new AMap.Bounds([0, 0], [1024 / 100, 1024 * ParkMapImageRatio / 100]),
                  url: `${util.ossUrl}/map/park-map.png`
               })
            ],
            limitBounds: new AMap.Bounds([-2, -2], [1024 / 100 + 2, 965 * ParkMapImageRatio / 100 + 4])
         });
         map.addControl(new AMapUI.BasicControl.Zoom({
            position: 'rb',
            showZoomNum: false,
            theme: 'dark'
         }));
         map.on('click', (e: any) => {
            map.clearMap();
            new AMapUI.SimpleMarker({
               topWhenClick: true,
               iconTheme: 'fresh',
               map: map,
               anchor: 'top-left',
               position: [e.lnglat.lng, e.lnglat.lat],
               extData: 0,
               containerClassNames: 'park-map-marker'
            });
            onClick && onClick(e);
         });
      });
   });
   return <div ref={mapContainerRef} className={styles.mapContainer} />;
}
